<template>
  <view class="page container">
    <z-paging :refresher-enabled="false" :auto-full-height="false" :default-page-size="15" ref="pagingRef"
      v-model="dataList" @query="queryList">
      <view slot="top">
        <u-tabs :list="tabsList" @click="tabClick" lineColor="#C5261D"
          :activeStyle="{ fontWeight: 500, color: '#000' }"></u-tabs>
      </view>
      <view class="goods-list pl-32 pr-32 mt-32">
        <!-- 终端店 -->
        <block v-if="currentTab === 0">
          <view class="goods-item pb-32" v-for="(item, index) in dataList" :key="index">
            <store-card :info="item.shop_info">
              <template slot="btn">
                <view @click.stop="handleCancelCollect(item.shop_info, 'shop')">
                  <u-button text="取消收藏" color="#C5261D" :customStyle="btnStyle"></u-button>
                </view>
              </template>
            </store-card>
          </view>
        </block>
        <!-- 酒厂 -->
        <block v-if="currentTab === 1">
          <view class="goods-item pb-32" v-for="(item, index) in dataList" :key="index">
            <factory-card :info="item.shop_info">
              <template slot="btn">
                <view @click.stop="handleCancelCollect(item.shop_info, 'factory')">
                  <u-button text="取消收藏" color="#C5261D" :customStyle="btnStyle"></u-button>
                </view>
              </template>
            </factory-card>
          </view>
        </block>
        <!-- 酒商 -->
        <block v-if="currentTab === 2">
          <view class="goods-item pb-32" v-for="(item, index) in dataList" :key="index">
            <factory-card :info="item.shop_info">
              <template slot="btn">
                <view @click.stop="handleCancelCollect(item.shop_info, 'factory')">
                  <u-button text="取消收藏" color="#C5261D" :customStyle="btnStyle"></u-button>
                </view>
              </template>
            </factory-card>
          </view>
        </block>
        <!-- 酒产品 -->
        <block v-if="currentTab === 3">
          <view class="goods-item pb-32" v-for="(item, index) in dataList" :key="index">
            <goods-card :info="item.goods_info">
              <template slot="btn">
                <view @click.stop="handleCancelCollect(item.goods_info, 'goods')">
                  <u-button text="取消收藏" color="#C5261D" :customStyle="btnStyle"></u-button>
                </view>
              </template>
            </goods-card>
          </view>
        </block>
      </view>
    </z-paging>
  </view>
</template>
<script>
import StoreCard from "@/components/rowCards/StoreCard";
import FactoryCard from "@/components/rowCards/FactoryCard";
import GoodsCard from "@/components/rowCards/GoodsCard";
import { collectYanListApi, collectFactoryListApi, collectGoodsListApi, collectYanRemoveApi, collectFactoryRemoveApi, collectGoodsRemoveApi } from "@/services/my";
export default {
  data() {
    return {
      currentTab: 0,
      tabsList: [
        {
          name: "终端店",
        },
        {
          name: "酒厂",
        },
        {
          name: "酒商",
        },
        {
          name: "酒产品",
        },
      ],
      btnStyle: {
        backgroundColor: "transparent",
        width: "124rpx",
        height: "56rpx",
        color: "#C5261D",
        borderRadius: "8rpx",
        fontSize: "24rpx",
        padding: 0,
      },
      dataList: [],
    };
  },
  components: {
    StoreCard,
    FactoryCard,
    GoodsCard,
  },
  methods: {
    tabClick({ index }) {
      this.currentTab = index;
      this.$refs.pagingRef?.reload();
    },
    queryList(page, pageSize) {
      const requestObj = {
        page,
        page_size: pageSize,
        ...this.params,
      };
      if (this.currentTab === 0) {
        collectYanListApi(requestObj).then((res) => {
          this.$refs.pagingRef?.complete(res.data?.data || []);
        });
        return;
      }
      if (this.currentTab === 1) {
        collectFactoryListApi({ ...requestObj, type: 1 }).then((res) => {
          this.$refs.pagingRef?.complete(res.data?.data || []);
        });
        return;
      }
      if (this.currentTab === 2) {
        collectFactoryListApi({ ...requestObj, type: 0 }).then((res) => {
          this.$refs.pagingRef?.complete(res.data?.data || []);
        });
        return;
      }
      if (this.currentTab === 3) {
        collectGoodsListApi(requestObj).then((res) => {
          this.$refs.pagingRef?.complete(res.data?.collect_list?.data || []);
        });
        return;
      }
    },
    handleCancelCollect(item, type) {
      uni.showModal({
        title: "提示",
        content: "确定取消收藏吗？",
        success: (res) => {
          if (res.confirm) {
            if (type === 'shop') {
              collectYanRemoveApi({ shop_ids: item.id }).then((res) => {
                this.$refs.pagingRef?.reload();
              });
            }
            if (type === 'factory') {
              collectFactoryRemoveApi({ shop_ids: item.id }).then((res) => {
                this.$refs.pagingRef?.reload();
              });
            }
            if (type === 'goods') {
              collectGoodsRemoveApi({ goods_ids: item.id }).then((res) => {
                this.$refs.pagingRef?.reload();
              });
            }
          }
        },
      });
    },
  },
};
</script>
